<template>
  <div class="form-widget-canvas" style="height:800px">
      <draggable 
        :list="widgetList"
        item-key="id" 
        group="dragGroup"
        ghost-class="ghost"
        handle=".drag-handler"
        filter=".forbid"
        dragClass="dragClass"
        chosen-class="chosenClass"
        animation="300"
        @start="onStart"
        @end="onEnd"
        @add="onAdd" 
        @update="onUpdate" 
        :move="onMove"
      >
        <template #item="{ element: widget, index }">
          <div class="transition-group-el">
            <template v-if="'page' === widget.category">
              <pageWidget :data="widget"></pageWidget>
            </template>
          </div>
        </template>
      </draggable>
  </div>
</template>

<script setup lang="ts">
    /***基础组件引入***/
    import { reactive, ref, watch, onMounted, getCurrentInstance, toRefs } from 'vue'
    import draggable from "vuedraggable"

    import fieldWidget from './fieldWidget'
    import containerWidget from './containerWidget'
    import pageWidget from './pageWidget'
    //import fieldDrag  from './fieldDrag.vue'
    const state = reactive({
        widgetList: [
          {type: 'table', category: 'page', icon: 'grid', name:'工具条'}
        ]
    });
    const {
      widgetList
    }  = toRefs(state);

    //拖拽开始的事件
    const onStart = (origin) => {
       console.log("开始拖拽");
        console.log(origin);
    };

    //拖拽结束的事件
    const onEnd = () => {
       console.log("结束拖拽");
      
    };

    const onMove = (e, originalEvent) => {
        //不允许停靠
     //   if (e.relatedContext.element.disabledPark == true) return false;

        return true;
    };

</script>
<style lang="scss" scoped>
   /* 隐藏组件拖拽状态中显示的黑点 */
    :deep(li.container-widget-item), :deep(li.field-widget-item) {
      list-style: none;
    }
</style>

